<template>
    <div class="slide">
        <div class="s-item" v-for="(item,index) in slideList" :key="index" @click="navTo(item)">
            <div class="s-item-tit">
                <p class="s-item-tit-cn1">{{item.title}}</p>
                <p class="s-item-tit-cn2">{{item.time}}</p>
            </div>
            <div class="s-item-tit2">
                <div class="s-item-tit2-img">
                    <img :src=item.img1 alt="">
                </div>
                <div class="s-item-tit2-rig">
                    <p class="s-item-tit2-cn1">{{item.name1}}</p>
                    <p class="s-item-tit2-cn2">{{item.grade1}}</p>
                </div>
            </div>
            <div class="s-item-tit3">
                <div class="s-item-tit2-img">
                    <img :src=item.img2 alt="">
                </div>
                <div class="s-item-tit3-rig">
                    <p class="s-item-tit3-cn1">{{item.name2}}</p>
                    <p class="s-item-tit3-cn2">{{item.grade2}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'slide',
    props:{
        slideList:Array
    },
    methods:{
        navTo(item){
            console.log(item)
        }
    }
}
</script>
<style lang='less' scoped>
    img{
        width: 100%;
        height: 100%;
    }
    .slide{
        padding-left:.2rem;
        display: flex;
        overflow: auto;
        height: 1.9rem;
        
        .s-item{
            width: 2.1rem;
            padding: 0 .4rem;
            height: 1.9rem;
            border-left: 1px solid #B4B4B4;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            
            .s-item-tit{
                width: 2.1rem;
                display: flex;
                justify-content: space-between;
                font-size: .22rem;
                .s-item-tit-cn1{
                    color: #828181;
                }
                .s-item-tit-cn2{
                    color: #4e4e4e;
                }
            }
            .s-item-tit2,.s-item-tit3{
                display: flex;
                width: 2.2rem;
                align-items: center;
                .s-item-tit2-img{
                    width: .4rem;
                    height: .4rem;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .s-item-tit2-rig,.s-item-tit3-rig{
                    width: 100%;
                    margin-left: .1rem;
                    display: flex;
                    color: #2F2F2F;
                    font-size: .28rem;
                    justify-content: space-between;
                    .s-item-tit2-cn1,.s-item-tit3-cn1{

                    }
                }
            }
        }
        .s-item:first-of-type{
            padding-left: 0;
            border-left: none;
        }
    }
</style>